<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
        1. 分支切换是什么意思
           如下如果data的值是ok，就显示data.text的内容，如果不是就显示not值，不同的分支切换不同的内容，就是分支切换
        2. 分支切换会带来一些副作用
        */
        const data = { ok: true, text: '123' }
        let activeAffect // 这个是全局变量 存储副作用函数
        let bucket = new WeakMap()
        let obj = new Proxy(data, {
            get(target, key) {
                track(target, key)
                console.log('访问了', target[key]);
                return target[key]
            },
            set(target, key, newVal) {
                target[key] = newVal
                console.log('修改了', target[key], '为', newVal);

                trigger(target, key)
            }
        })
        function track(target, key) {
            if (!activeAffect) {
                return target[key]
            }
            let depMap = bucket.get(target)
            if (!depMap) {
                bucket.set(target, (depMap = new Map()))
            }
            let depSet = depMap.get(key)
            if (!depSet) {
                depMap.set(key, (depSet = new Set()))
            }
            depSet.add(activeAffect)
        }
        function trigger(target, key) {
            let depMap = bucket.get(target)
            let effects = depMap.get(key)
            effects && effects.forEach(fn => {
                fn()
            })
        }
        function effect(fn) {
            activeAffect = fn
            fn()
        }
        effect(() => {
            console.log(1);
            // 我们怎么去测试这个效果呢？我们把 obj.ok = false;然后 obj.text = '45' 改他个很多很多次。发现这里还是会被触发很多次。即便这里的document.body.innerHTML的值不需要改变
            document.querySelector('body').innerHTML = obj.ok ? obj.text : 'not'
        })
        // 分支切换如何进行优化


    </script>
</body>

</html>